//还要写一个根据json转换成select的（或者改变一下美化一下后台返回的格式{data: [{"lid", {}}, {"lid", {}}]}）
//bug：reload会重新刷新之前填过的信息，要用render的第二个参数才能局部更新

layui.use([ 'form', 'layer', 'table'], function() {
    var form = layui.form
        ,table = layui.table
        ,$ = layui.jquery;

    verifyExt(form);
    form.on('submit(*)', function(data){ //form校验成功才会执行下面的代码
        //怎么刷新树状table
        ajax("/framework/SysFileModule.do?method=add", serializeObject($("#bofrom")));
        return false; //禁用form表单自带的提交
    });

    layui.use(['table', 'layer', 'element', 'jquery', 'form'], function () {
        var layEvent = layui.event,
            data = layui.data
            ,table = layui.table
            ,layer = layui.layer
            ,element = layui.element
            ,$ = layui.jquery
            ,form = layui.form;

        var tableIns = table.render({
            elem: '#grid'
            , toolbar: '#_tableToolbar'		//开启工具栏（动态列素筛选、导出、打印）
            ,cellMinWidth : 60 			//全局定义所有常规单元格的最小宽度（默认：60），一般用于列宽自动分配的情况。其优先级低于表头参数中的 minWidth
            ,height : "full-75" 			//设定容器高度
            ,data: []
            ,size: 'lg'
            ,cols: [[
                {type: 'checkbox', fixed: true, hide: true} //有这个才会对齐
                ,{field: 'id', title: 'ID', width: 40}
                ,{
                    field: 'jsLid',
                    title: '脚本类型',
                    align: 'center',
                    width: 200,
                    templet: function (d) {
                        // 模板的实现方式也是多种多样，这里简单返回固定的
                        return '<select name="jsLid" lay-filter="noneOption" lay-verify="required" data-value="' + d.jsLid + '" >\n' +
                            '        <option value=""></option>\n' +
                            '        <option value="18000" version="1.0.0" price="1">淘宝刷猫币</option>\n' +
                            '        <option value="20000" version="2.0.0" price="2">京东刷币</option>\n' +
                            '        <option value="20001" version="1.0.0" price="3">强国学习</option>\n' +
                            '      </select>';
                    }
                }
                ,{field: 'version', title: '脚本版本'}
                ,{field: 'price', title: '单价(元)'}
                ,{toolbar: '#bar', title: '操作', align: 'center' }
            ]]
            , done: function (res, curr, count) { //load和reaload之后都会触发
                //setTimeout(100, form.render(`select`, `noneOption`));

                //新增行
                $("#addRow").click(function () {
                    let data = table.cache["grid"];
                    data.push({id: "", jsLid: 0});
                    tableIns.reload({data: data});
                });

                //获取所选行
                $('#getCheckedData').click(function () {
                    // 验证一下下拉选择之后有没有作用到表格缓存数据
                    var checkStatus = table.checkStatus('grid'); //test即为基础参数id对应的值
                    console.info(checkStatus);
                });
            }
        });

        // 监听修改update到表格中
        form.on(`select()`, function (data) {
            let selectElem = $(data.elem)
                ,selectOption = selectElem.find(`option[value="${data.value}"]`);
            let tdElem = selectElem.closest("td")
                ,trElem = tdElem.closest("tr");
            //更新到表格的缓存数据中，才能在获得选中行等等其他的方法中得到更新之后的值
            let cacheTr = table.cache["grid"][trElem.data("index")];
            cacheTr.jsLid = data.value || "";
            cacheTr.version = selectOption.attr(`version`) || "";
            cacheTr.price = selectOption.attr(`price`) || "";
            //更新到页面上
            trElem.find(`td[data-field="version"] div`).html(cacheTr.version);
            trElem.find(`td[data-field="price"] div`).html(cacheTr.price);
            //清空lay
            selectElem.removeAttr("lay-filter");

            // tableIns.reload({data: table.cache["grid"]});
        });
        //监听删除行操作
        table.on('tool(grid)', function (obj) {
            if (obj.event === 'delRow') {
                // let data = table.cache["grid"];
                // // if(data.length <= 1){
                // //     return layer.msg("最后一行，不能删除");
                // // }

                obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
            }
        });
    });

});